import { observer } from 'mobx-react';
import './User.less';
import UserM from './UserM';
import UserV from './UserV';
import { Radio } from 'antd';
import { useState } from 'react';
const User = () => {
    const [isShow,setIsShow]=useState(true);
    //点击 用户
    const user = () => {
        setIsShow(true);
    }
    // 会员
    const vip = () => {
        setIsShow(false);
    }
    //显示哪块的内容
    const showTemp=()=>{
        if(isShow){
            return <UserM/>
        }else{
            return <UserV/>
        }
    }
    return (
        <div className="big-card">
            <div className="card-header">
                <h2>用户管理</h2>
            </div>
            <div className="detail_u hy">
                {/* 你表演的地方 */}
                <div>
                    <Radio.Group defaultValue="a" buttonStyle="solid">
                        <Radio.Button className="btn" value="a" onClick={user}>用户管理</Radio.Button>
                        <Radio.Button value="b" onClick={vip}>会员角色</Radio.Button>
                    </Radio.Group>
                </div>

                {showTemp()}

            </div>
        </div>
    );
}

export default observer(User);